function init(){
	var map = L.map("map").setView([30.56486,114.353622 ], 8);
	L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
		attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
		maxZoom: 18,
		id: 'mapbox/streets-v11',
		tileSize: 512,
		zoomOffset: -1,
		accessToken: 'pk.eyJ1IjoibGl6eWFncnMiLCJhIjoiY2t1M2UxNmd1NGV4ZDJwbzIzYWxoOGZlbiJ9.PYUoUFa8Twrx8GNhUq8Ydg'
	}).addTo(map);
	
	var mbUrl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';
	var mbAttr = 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>';
	
	var grayscale = L.tileLayer(mbUrl, {id: 'mapbox/light-v9', tileSize: 512, zoomOffset: -1, attribution: mbAttr});
	var streets = L.tileLayer(mbUrl, {id: 'mapbox/streets-v11', tileSize: 512, zoomOffset: -1, attribution: mbAttr});
	var satellite = L.tileLayer(mbUrl, {id: 'mapbox/satellite-v9', tileSize: 512, zoomOffset: -1, attribution: mbAttr});
	
	var baseLayers = {
		'Sputnik': L.tileLayer('http://{s}.tiles.maps.sputnik.ru/{z}/{x}/{y}.png', {
			maxZoom: 18,
			attribution:"Sputnik Layer"
		}),
	 
		"CartoDB Positron": L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
			maxZoom: 18
		}),
	 
		"OSM": L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
			maxZoom: 18
		}),
	 
		"OpenTopoMap": L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
			maxZoom: 18
		}),
	};
	 
	
	// 遍历每个要素的指定字段
	function onEachFeature(feature, layer) {
	    // does this feature have a property named popupContent?
	    if (feature.properties && feature.properties.name) {
	        layer.bindPopup(feature.properties.name);
	    }
	}
	
	var Pro_Style = {
	    "color": "#00aa00",
	    "weight": 2,
	    "opacity": 0.5
	};
	
	// 湖北省geojson
	var hubeiprovince_geojson = L.geoJSON(null,{style:Pro_Style,
											    onEachFeature: onEachFeature
										});
	$.ajax({
		url:'../data/420000.json',
		type:'get',
		dataType:'json',
		success:function(result){
			//console.log(result);
			hubeiprovince_geojson.addData(result);
		}
	});
	
	//武汉市geojson
	var WuhanCity_geojson = L.geoJSON(null,{
											onEachFeature: onEachFeature
										});
	$.ajax({
		url:'../data/420100.json',
		type:'get',
		dataType:'json',
		success:function(result){
			//console.log(result);
			WuhanCity_geojson.addData(result);
		}
	});
	
	
	var WuChang_Style = {
	    "color": "#ff5500",
	    "weight": 2,
	    "opacity": 0.5
	};
	
	//武昌区geojson
	var Wuchang_geojson = L.geoJSON(null,{style:WuChang_Style,
											    onEachFeature: onEachFeature});
	$.ajax({
		url:'../data/420106.json',
		type:'get',
		dataType:'json',
		success:function(result){
			//console.log(result);
			Wuchang_geojson.addData(result);
		}
	});
	
	
	var Search_Polygon_Style = {
	    "color": "#aa00ff",
	    "weight": 2,
	    "opacity": 0.5
	};
	
	//加载Geoserver发布的一个在线服务
	var Search_Polygon_geojson = L.geoJSON(null,{style:Search_Polygon_Style,
											    onEachFeature: onEachFeature});
	$.ajax({
		url:'../data/Search_Polygon.json',
		type:'get',
		dataType:'json',
		success:function(result){
			console.log(result);
			Search_Polygon_geojson.addData(result);
		}
	});
	
	var GDP_Polygon_Style = {
	    "color": "#00aa7f",
	    "weight": 2,
	    "opacity": 0.5
	};
	
	//加载Geoserver发布的一个在线服务
	var GDP_Polygon_geojson = L.geoJSON(null,{style:GDP_Polygon_Style,
											    onEachFeature: getGDPonEachFeature});
	$.ajax({
		url:'../data/GDP_Polygon.json',
		type:'get',
		dataType:'json',
		success:function(result){
			console.log(result);
			GDP_Polygon_geojson.addData(result);
		}
	});
	
	//访问数据库中GDP表格的专用回调函数
	//点击地图要素事件回调函数
		function getGDPonEachFeature(feature, marker) {
			//获取选中要素的行政区编码
			var code = feature.properties.code;
			console.log('我被点中了，我的code是::::'+code);
			//新建弹出窗体并设置大小
			var content = '<div style="width: 520px; height: 320px;" id="popupwindow"></div>';
			//点击弹出窗口，并设置最大宽度，因为默认宽度为301，不一定够一个Echart的正常显示
			marker.bindPopup(content, {maxWidth : 560});
			//点击弹出信息窗口		
			marker.on('popupopen',function(e){
				//定义chart图表显示容器
				var myChart=echarts.init(document.getElementById('popupwindow'));
				
				//**********************根据行政区编码查询数据加对应的数据并传给myChart加载柱状图
				getDatabyCode(code,myChart);
			});
		}
	
	/*
		 * 用ajax将选中省份的code传给路由，并从数据库中读取相关数据返回
		 * code：行政区代码，用于地图要素和属性数据库的关联字段
		 * myChart：chart图表对象
		 */
		function getDatabyCode(code,myChart){
			var xValue=[];
			var yValue=[];
			$.ajax({
				url: '/GDPQuery?code=' + code, 
				
				type: 'get',
				dataType: 'json',
				outputFormat: 'text/javascript',
				success:function(result){
						//测试是否返回数据
						console.log(result[0].GDP);
						//请求成功时执行该函数内容，result即为服务器返回的json对象
						if (result) {
						for(var i=0;i<result.length;i++){  
							//取出x轴--年份     
							xValue.push(result[i].datayear);
							console.log('年份为:::'+result[i].datayear);
						}
						for(var i=0;i<result.length;i++){
							//取出y轴--GDP数据
							yValue.push(result[i].GDP);
							console.log('GDP为:::'+result[i].GDP);
						}
						//区域
						var polygon_name = result[0].polygon_name
						console.log('行政区名称为:::'+polygon_name);
						//**********************调用Echarts函数生成Echarts图表**********************
						getChart(xValue,yValue,myChart,polygon_name);
					}
				},
				error:function(data){
					console.log('error::'+data[0]+'---图表请求数据失败');
				}
			});
		}
		
		/*
		 * Echarts构建函数
		 * xValue:横坐标参数
		 * yValue:纵坐标参数
		 * myChart：echart对象
		 * pro_name省行政区名称
		 */
		function getChart(xValue,yValue,myChart,pro_name){
			//测试值是否正常传递进来
			console.log("xValue:"+xValue);
			console.log("yValue:"+yValue);
			var option = {
				title: {
					//显示到弹出窗口的标题栏
					text: pro_name+'历年GDP柱状图'
				},
				color: ['#3398DB'],
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow'
					}
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				//x横轴
				xAxis: [
					{
						type: 'category',
						//data值为ajax传递过来的值
						data :xValue,
						axisTick: {
							alignWithLabel: true
						}
					}
				],
				yAxis: {},
				series: [
					{
						name: 'GDP(万元)',
						type: 'bar',
						barWidth: '40%',
						data: yValue,
						//鼠标放在柱状图上面时，显示数值
						itemStyle: {
							normal: {
								label: {
									show: true,
									position:'top'
								}
							}
						}
					}
				]
			};
			//清除上一次数据缓存
			myChart.clear();
			//开始制图
			myChart.setOption(option);
		}
	
	
	
	var wmsLayer = L.tileLayer.wms('http://ows.mundialis.de/services/service?', {
	    layers: 'TOPO-OSM-WMS'
	});
	
	
	//定义专题图层
	var overlayMaps = {
		"武昌区": Wuchang_geojson,
		"武汉市": WuhanCity_geojson,
		"湖北省": hubeiprovince_geojson,
		"Search_Polygon":Search_Polygon_geojson,
		"GDP_Polygon":GDP_Polygon_geojson,
		"TOPO-OSM-WMS":wmsLayer
	};
	
	var layerControl = L.control.layers(baseLayers,overlayMaps, {}, {
		position: 'topright',
		collapsed: true
	}).addTo(map);
	layerControl.addBaseLayer(satellite, "Satellite");
	layerControl.addBaseLayer(streets, "streets");
	layerControl.addBaseLayer(grayscale, "grayscale");
}